<template>
  <div class="status">
    <h1>最新入职员工</h1>
    <el-table :data="currentList" style="width: 100%" :row-class-name="tableRowClassName">
      <el-table-column prop="ruzhi" label="入职日期" width="180"></el-table-column>
      <el-table-column prop="staffName" label="姓名" width="180"></el-table-column>
      <el-table-column prop="gangwei" label="部门岗位" width="180"></el-table-column>
      <el-table-column prop="zhuzhi" label="现在住址"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="detail(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 详情 -->
    <detail :ruleForm2="ruleForm2" v-if="isShow" @show="show"></detail>
    <!-- 换页 -->
    <page :allList="tableData2" @parentCurrentList="getcurrentList"></page>
  </div>
</template>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.status {
  position: relative;
}
</style>

<script>
// axios
import Axios from "axios";
//详情模板
import detail from "./detail";
// 换页模板
import page from "../page";
export default {
  mounted() {
    this.getStaffList();
  },
  components: {
    //详情模板
    detail,
    // 换页模板
    page
  },
  methods: {
    // 隔行变色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return "warning-row";
      } else if (rowIndex % 2 === 0) {
        return "success-row";
      }
      return "";
    },
    // 一周内的新员工获取列表
    getStaffList() {
      Axios.get("api/staff/status").then(res => {
        this.tableData2 = res.data.data.reverse();
        // 返回结果小于10就显示全部
        if (this.tableData2.length < 10) {
          this.currentList = this.tableData2;
        } else {
          // 不小于10就取出前十个放进数组
          for (let i = 0; i < 10; i++) {
            this.currentList.push(this.tableData2[i]);
          }
        }
      });
    },
    // 查看按钮
    detail(data) {
      // 点击详情的对象
      this.ruleForm2 = data;
      // 显示详情页面
      this.isShow = true;
    },
    // edit编辑按钮
    edit(data) {
      console.log(data.staffName)
    },
    // 传送给page数据
    getcurrentList(data) {
      this.currentList = data;
    },
    // 子元素关闭详情页面
    show(data) {
      this.isShow = data;
    }
  },
  data() {
    return {
      // 一周内的新员工获取列表
      tableData2: [],
      // 点击详情的对象
      ruleForm2: {
        _id: "5c401891e7e746e908e54118",
        createName: "图图",
        staffName: "阿斯达是的",
        age: "",
        sex: "1",
        phone: "18667775555",
        shengri: "",
        xuexing: "",
        xingzuo: "",
        height: "",
        weight: "",
        jiankangzhuangkuang: "",
        bingli: "无",
        xueli: "初中",
        biyeyuanxiao: "",
        zhuanye: "",
        techang: "",
        aihao: "",
        shenfenzheng: "",
        minzu: "",
        zhengzhimianmao: "群众",
        jiguan: "北京/北京市/东城区",
        zhuzhi: " 北京/北京市/东城区/啊啊啊",
        chusheng: "2019-01-02",
        zhufang: "",
        hunyu: "",
        jiazhao: "",
        huzhao: "",
        tuiwuzheng: "",
        gangwei: "二病区,护士",
        zhiwu: "",
        ruzhi: "2019-01-02",
        guanxi: "",
        xingming: "",
        danwei: "",
        zhiwei: "",
        dianhua: "",
        status: "在职",
        imgUrl: "api/public\\images\\4376369f81d3647774feb1b55eaeee6c.jpg",
        __v: 0
      },
      // 当前显示的内容
      currentList: [],
      isShow: false
    };
  }
};
</script>
